<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"  ></canvas>
<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
//    渐变  影响渐变的因素：颜色 方向 长度
//    如何使用渐变
//    1，创建渐变对象
    var g=ctx.createLinearGradient(0,0,550,550);
//    2,添加渐变的颜色
    g.addColorStop(0,"red");
    g.addColorStop(0.7,"yellow");
    g.addColorStop(1,"green");
//    3,使用渐变对象
    ctx.strokeStyle=g;
    ctx.fillStyle=g;
    ctx.lineWidth=10;

    ctx.strokeRect(200,200,200,200);
//   填充矩形
    ctx.fillRect(250,250,250,250)

</script>


</body>
</html>